<template>
  <UniversalContainer name="禁用Dialog" :paramaters="type">
    <Button @click="toggle" :disabled="true">toggle</Button>
    <Dialog
      :visible="x"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
      @changeVisible="toggle1"
    >
      <template v-slot:content>
        <div>副标题文字</div>
        <div>提示信息文字</div>
      </template>
      <template v-slot:title>
        <strong>加粗的标题</strong>
      </template>
    </Dialog>
  </UniversalContainer>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Button from "../../baseComponent/Button.vue";
import Dialog from "../../baseComponent/Dialog.vue";
import UniversalContainer from "../UniversalContainer.vue";

const x = ref(false);
const toggle = () => {
  x.value = !x.value;
};
const toggle1 = () => {
  x.value = false;
};
const f1 = () => {
  return false;
};
const f2 = () => {};
const type = ref(
  `
   import DialogContainer from "./DialogContainer.vue"\n
   <Button @click="toggle" :disabled="true">toggle</Button>
    <Dialog
      :visible="x"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
      @changeVisible="toggle1"
    >
      <template v-slot:content>
        <div>副标题文字</div>
        <div>提示信息文字</div>
      </template>
      <template v-slot:title>
        <strong>加粗的标题</strong>
      </template>
    </Dialog>  

    import Button from "../../baseComponent/Button.vue";
    import Dialog from "../../baseComponent/Dialog.vue";
    // import DialogContainer from "./DialogContainer.vue";
    
    const x = ref(false);
    const toggle = () => {
      x.value = !x.value;
    };
    const toggle1 = () => {
      x.value = false;
    };
    const f1 = () => {
      return false;
    };
    const f2 = () => {};
  `
);
</script>

<style scoped lang="scss"></style>
